<template>
  <!-- 下拉框公共组件 -->
  <div class="custom-dropdown">
    <van-dropdown-menu active-color="#39393c">
      <van-dropdown-item
        @open="handleOpen"
        @close="handleClose"
        v-model="dropdownvalue"
        :options="dropdownOptions"
        @change="handleDropdownChange"
      >
        <!-- 自定义标题和图标 -->
        <template #title>
          <span>{{ selectedText }}</span>
          <van-icon
            :class="{ 'rotate-icon': isOpen }"
            name="arrow-down"
            size="12"
            color="#6e717a"
          />
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const dropdownvalue = ref(0); // 下拉菜单默认值
const isOpen = ref(false); // 下拉菜单箭头状态
// 下拉菜单选项
const dropdownOptions = ref([
  { text: "Order By Distance", value: 0 },
  { text: "Top Sales", value: 1 },
  { text: "Price Higt to Low", value: 2 },
]);
// 获取当前选中文本
const selectedText = computed(() => {
  const selected = dropdownOptions.value.find(
    (item) => item.value === dropdownvalue.value
  );
  return selected ? selected.text : "请选择";
});

const handleDropdownChange = (val) => {
  dropdownvalue.value = val;
};
const handleOpen = () => {
  isOpen.value = true;
};
const handleClose = () => {
  isOpen.value = false;
};
</script>

<style lang="scss" scoped>
:deep(.van-dropdown-menu__bar) {
  position: absolute;
  height: 30px;
  top: 6px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  box-shadow: none;
  .van-icon-arrow-down {
    margin-left: 2px;
  }
  .van-dropdown-menu__title {
    font-size: 14px;

    &::after {
      display: none;
    }
  }
  /* 图标旋转动画 */
  .rotate-icon {
    transform: rotate(180deg);
  }
}
// 下拉出来的数据的样式
:deep(.van-dropdown-item__content) {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  .van-cell {
    .van-cell__value {
      i {
        font-size: 20px;
        &::before {
          color: #62bfa5;
        }
      }
    }
  }
}
</style>